<template>
    <baidu-map class="map" :center="center" :zoom="zoom" @ready="initMap"  :map-click="false" :double-click-zoom="false"
    @mousemove="syncPolyline"
    @click="paintPolyline"
    @rightclick="newPolyline" 
    :scroll-wheel-zoom="true"
		:mapStyle="mapStyle" >
    <!--自动定位-->
		<!-- <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="false" :autoLocation="true" @locationSuccess="getLoctionSuccess" @locationError="getLocationError">
		</bm-geolocation> -->
		<!-- 自定义定位图标覆盖物 -->
		<bm-marker v-for="(item,i) in marker.paths" :key="'marker'+i" :position="item" animation="BMAP_ANIMATION_BOUNCE"></bm-marker>
    <bm-polygon :path="path" v-for="(path, index) of polygon.paths" :key="'polygon_'+index" stroke-color="blue" :stroke-opacity="0.5" :stroke-weight="2" />
    <bm-circle :center="path" v-for="(path, index) of circle.paths" :key="'circle_'+index" :radius="circle.radius" :editing='true' stroke-color="blue" :stroke-opacity="0.5" :stroke-weight="2" @lineupdate="updateCirclePath" ></bm-circle>
    <bm-polyline :path="path" v-for="(path, index) of polyline.paths" :key="'polyline_'+index" :stroke-weight="2" ></bm-polyline>
    <bm-control class="map-edit-container">
        <button class="water-icon-device-addpo" :class="{'active': marker.editing}" @click="toggle('marker')"  title="绘制点">绘制点</button>
        <button class="water-icon-device-xian" :class="{'active': polyline.editing}" @click="toggle('polyline')" title="绘制折线">绘制折线</button>
        <button class="water-icon-device-gon" :class="{'active': polygon.editing}" @click="toggle('polygon')" title="绘制多边线">绘制多边线</button>
        <button class="water-icon-device-circle" :class="{'active': circle.editing}" @click="toggle('circle')" title="绘制圆形">绘制圆形</button>
        <button class="water-icon-device-chexiao" :class="{'active': resetData}" @click="resetRecover('resetData')" title="重置">重置</button>
        <button class="water-icon-device-huifu" :class="{'active': recoverData}" @click="resetRecover('recoverData')" title="返回">返回</button>
    </bm-control>
	</baidu-map>

</template>

<script>
// import { BaiduMap, BmScale, BmGeolocation } from 'vue-baidu-map'
import {mapGetters} from 'vuex'
export default {
  data() {
    return {
      autoLocationPoint: {lng: 0, lat: 0},
      initLocation: false,
      center: '荆州',
      zoom: 12,
      mapStyle:{
            features: ["road","building","water","land"],//隐藏地图上的"poi",
            style : "midnight",
        },
      currEditName : 'marker',
      marker: {
        editing: false,
        paths: []
      },
      polyline: {
        editing: false,
        paths: []
      },
      polygon: {
        editing: false,
        paths: []
      },
      circle: {
        editing: false,
        paths: [],
        radius: 1000
      },
      resetData: false,
      recoverData: false
    }
  },
  mounted() {
  },
  computed: mapGetters(['getLastDrawHistory']),
  methods: {
      initMap ({BMap, map}) {
        map.addControl(new BMap.MapTypeControl({
          mapTypes:[
                BMAP_NORMAL_MAP,
                BMAP_HYBRID_MAP
            ],
          anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
        }));
        var top_left_navigation = new BMap.NavigationControl();
        map.addControl(top_left_navigation);
        let _this = this;	// 设置一个临时变量指向vue实例，因为在百度地图回调里使用this，指向的不是vue实例；
        
        //使用浏览器定位
        /* var geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function(r){
          console.log(r);
          _this.center = {lng: r.longitude, lat: r.latitude};		// 设置center属性值
          _this.autoLocationPoint = {lng: r.longitude, lat: r.latitude};		// 自定义覆盖物
          _this.initLocation = true;	
          console.log('center:', _this.center)	// 如果这里直接使用this是不行的
        },{enableHighAccuracy: true}) */
      },
      toggle(type){
        let nameArr = ['marker', 'polyline', 'polygon', 'circle']
        this.currEditName = type
        this[type].editing = !this[type].editing
        nameArr.splice(nameArr.indexOf(type), 1)
        nameArr.forEach((curr) => {
            this[curr].editing = false
        })

      },
      syncPolyline (e) {
        if (!this[this.currEditName].editing) {
            return
        }
        const {paths} = this[this.currEditName]
        if (!paths.length) {
            return
        }
        const path = paths[paths.length - 1]
        if (!path.length) {
            return
        }
        if (path.length === 1) {
            path.push(e.point)
        }
        this.$set(path, path.length - 1, e.point)
      },
      newPolyline (e) {
        if (!this[this.currEditName].editing) {
            return
        }
        const {paths} = this[this.currEditName]
        if(!paths.length) {
            paths.push([])
        }
        const path = paths[paths.length - 1]
        path.pop()
        if (path.length) {
            paths.push([])
        }
      },
      paintPolyline (e) {
        console.log(e)
        if (!this[this.currEditName].editing) {
            return
        }
        if (this.currEditName === 'marker' || this.currEditName === 'circle') {
          const {paths} = this[this.currEditName]
          paths.push(e.point)
          this[this.currEditName].editing = false
        }else{
          const {paths} = this[this.currEditName]
          !paths.length && paths.push([])
          paths[paths.length - 1].push(e.point)
        }
        
        this.$store.dispatch('setLastDrawHistoryActions', {
            paths: this[this.currEditName].paths,
            lastEditName: this.currEditName
        })
      },
      updateCirclePath(e) {
        console.log(e);
        
        this.circle.paths[this.circle.paths.length-1] = e.target.getCenter()
        this.circle.radius = e.target.getRadius()
      },
      resetRecover(name) {
        //重置
        if(name === 'resetData') {
            this[this.getLastDrawHistory.lastEditName].editing = false
           // this[this.getLastDrawHistory.lastEditName].isShow = false
            this[this.getLastDrawHistory.lastEditName].paths = []
        }else{
          //返回
          //  this[this.getLastDrawHistory.lastEditName].isShow = true
            this[this.getLastDrawHistory.lastEditName].paths = this.getLastDrawHistory.paths
        }
      }
  },
  components: {

  }
}
</script>

<style lang='less' scoped>
.map{
  width: 100%;
  height: 100%;
  margin: 0px !important;
}
div.anchorBL{
  display:none !important;
}
.map-edit-container{
  top: 9px !important;
  left: 35% !important;
  z-index: 9999 !important;
  
  button{
    width: auto;
    height: 35px;
    border: 1px solid #d2d2d2;
    border-radius: 5px;
    background-color: rgba(0,0,0,.3);
    color: rgb(255, 255, 255);
  }
}

.active{
  background-color: rgb(74, 187, 240) !important;
}
</style>
